<template>
	<view>
    <view v-if=" list.key!= '热门城市' && list.key!='常用城市'">
      <view v-if="(loaded || list.itemIndex < 15) && showLetter" class="uni-indexed-list__title-wrapper">
        <text v-if="list.items && list.items.length > 0" class="uni-indexed-list__title">{{ list.key }}</text>
      </view>
      <view v-if="(loaded || list.itemIndex < 15) && list.items && list.items.length > 0" class="uni-indexed-list__list">
        <view v-for="(item, index) in list.items" :key="index" class="uni-indexed-list__item"
              hover-class="uni-indexed-list__item--hover">
          <view class="uni-indexed-list__item-container" @click="onClick(idx, index)">
            <view class="uni-indexed-list__item-border"
                  :class="{ 'uni-indexed-list__item-border--last': index === list.items.length - 1 }">
              <view v-if="showSelect" style="margin-right: 20rpx;">
                <uni-icons :type="item.checked ? 'checkbox-filled' : 'circle'"
                           :color="item.checked ? '#007aff' : '#C0C0C0'" size="24" />
              </view>
              <text class="uni-indexed-list__item-content">{{ item.name }}</text>
            </view>
          </view>
        </view>
        <view v-if="list.itemIndex > 1 && list.pageNo < list.totalPage && list.items.length>=10" class="uni-indexed-list-more"
              @click="viewMore">{{i18n('viewMore','点击查看更多')}}</view>
      </view>
    </view>
    <view v-else >
        <view class="common-head">{{list.key}}</view>
        <view class="common-head-list">
            <div class="common-head-list-span" @click="onClick(idx, index)" v-for="(item, index) in list.items" :key="index">{{ item.name }}</div>
        </view>
    </view>
	</view>
</template>

<script>
export default {
	name: 'UniIndexedList',
	emits: ['itemClick'],
	props: {
		showLetter: {
			type: Boolean,
			default: true
		},
		loaded: {
			type: Boolean,
			default: false
		},
		idx: {
			type: Number,
			default: 0
		},
		list: {
			type: Object,
			default() {
				return {}
			}
		},
		showSelect: {
			type: Boolean,
			default: false
		}
	},
	methods: {
    i18n(name,text,key){
      return this.$ti18(name,text,"rxCityLang",key);
    },
		onClick(idx, index) {
			this.$emit("itemClick", {
				idx,
				index
			})
		},
		viewMore() {
			this.$emit('viewMore', this.list)
		}
	}
}
</script>

<style lang="scss" scoped>
.common-head-list{
  text-align: left;
  display: flex;
  flex-wrap: wrap;
}
.common-head-list-span{
  background-color: #f5f5f5;
  height: 2rem;
  text-align: center;
  color: #555555;
  font-weight: bold;
  margin-left: 1rem;
  border-radius: 5px;
  margin-top: 1rem;
  width: calc(33.3% - 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.common-head{
  color: #555555;
  line-height: 2rem;
  height: 2rem;
  text-align: left;
  padding-left: 1rem;
  font-weight: bold;
  margin-top: 0.5rem;
}
.uni-indexed-list__list {
	background-color: $uni-bg-color;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
}

.uni-indexed-list__item {
	font-size: 14px;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex: 1;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.uni-indexed-list__item-container {
	padding-left: 15px;
	flex: 1;
	position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	box-sizing: border-box;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
}

.uni-indexed-list__item-border {
	flex: 1;
	position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	box-sizing: border-box;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 50px;
	padding: 25px 0px;
	padding-left: 0;
	// border-bottom-style: solid;
	// border-bottom-width: 1px;
	// border-bottom-color:  #DEDEDE;
}

.uni-indexed-list__item-border--last {
	border-bottom-width: 0px;
}

.uni-indexed-list__item-content {
    flex: 1;
    color: #222222;
    text-align: left;
    height: 2rem;
    line-height: 2rem;
}

.uni-indexed-list {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
}

.uni-indexed-list__title-wrapper {
	display: flex;
	width: 100%;
}

.uni-indexed-list__title {
	height: 1.5rem;
  line-height:1.5rem;
  padding: 0px 1rem;
  color: #007aff;
	font-weight: bold;
}

.uni-indexed-list-more {
	font-size: 14px;
	display: flex;
	flex: 1;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 10px 0;
  margin-left: 32px;
}
</style>

